<template>
  <view class="daterange-picker">
    <ve-date-picker
      class="picker-item start"
      v-model="computedStart"
      v-bind="{
        ...$attrs,
        ...(config?.start || {}),
      }"
      :title="title[0]"
      :arrow="false"
      :placeholder="placeholder[0]"
      :maxDate="maxDateStamp"
      @confirm="confirmStart"
    ></ve-date-picker>
    <text class="splite-text">{{ spliteText }}</text>
    <ve-date-picker
      class="picker-item end"
      v-model="computedEnd"
      v-bind="{
        ...$attrs,
        ...(config?.end || {}),
      }"
      :title="title[1]"
      :arrow="false"
      :placeholder="placeholder[1]"
      :minDate="minDateStamp"
      @confirm="confirmEnd"
    ></ve-date-picker>
  </view>
</template>
<script setup>
  import { computed } from 'vue'
  import dayjs from 'dayjs'
  const props = defineProps({
    title: {
      type: Array,
      default: () => ['开始时间', '结束时间'],
    },
    placeholder: {
      type: Array,
      default: () => ['开始时间', '结束时间'],
    },
    start: {
      type: [String, Number],
      default: '',
    },
    end: {
      type: [String, Number],
      default: '',
    },
    spliteText: {
      type: String,
      default: '至',
    },
    config: {
      type: Object,
      default: () => {},
    },
  })
  const emit = defineEmits(['update:start', 'update:end', 'confirm', 'change'])
  const computedStart = computed({
    get() {
      return props.start
    },
    set(val) {
      emit('update:start', val)
    },
  })
  // end 需要限制最小值
  const computedEnd = computed({
    get() {
      return props.end
    },
    set(val) {
      emit('update:end', val)
    },
  })
  const confirmStart = (val) => {
    emit('update:start', val)

    emit('confirm', [val, computedEnd.value])
  }
  const confirmEnd = (val) => {
    emit('update:end', val)

    emit('confirm', [computedStart.value, val])
    emit('change', [computedStart.value, val])
  }
  // 限制最大最小值
  // start 需要限制最大值
  const maxDateStamp = computed(() => {
    const maxDate = props.config?.start?.maxDate
    if (maxDate) {
      let maxValue = dayjs(maxDate).valueOf()
      return props.end ? dayjs(props.end).valueOf() : maxValue
    } else {
      return props.end ? dayjs(props.end).valueOf() : undefined
    }
  })
  // end 需要限制最小值
  const minDateStamp = computed(() => {
    const minDate = props.config?.end?.minDate
    if (minDate) {
      let minValue = dayjs(minDate).valueOf()
      return props.start ? dayjs(props.start).valueOf() : minValue
    } else {
      return props.start ? dayjs(props.start).valueOf() : undefined
    }
  })
</script>
<style lang="less" scoped>
  .daterange-picker {
    display: flex;
    width: 100%;
    justify-content: space-between;
    .splite-text {
      font-size: 30rpx;
      color: #191c27;
    }
    .picker-item {
      flex: 1;
      &.start {
        text-align: left;
      }
      &.end {
        text-align: right;
        /deep/ .date-picker-trigger {
          justify-content: flex-end;
        }
      }
    }
  }
</style>
